<template>
	<view>
		<view class="mt-5" v-if="u_loadmore">
			<u-loadmore status="loading" icon-type="circle" />
		</view>
		<view v-else>
			<scroll-view scroll-y="true" :style="{height: scrollHeight}">
				<!-- 平台分类 -->
				<view class="">
					<view class="rounded-20 m-2 bg-white" v-for="(item,index) in oneClazz" :key="index">
						<view class="d-flex j-sb p-3" @click="terrace_add(item)">
							<view class="d-flex">
								<u-icon v-if="item.icon_show" name="minus-circle" color="#E7484D" size="40"></u-icon>
								<u-icon v-else  name="plus-circle" color="#E7484D" size="40"></u-icon>
								<view class="ml-1 font-md">{{item.cat_name}}</view>
							</view>
						</view>
						<!-- 二级 -->
						<view class="" v-show="item.icon_show">
							<view class="" v-if="item.cat_id==items.parent_id" v-for="(items,indexs) in twoClazz" :key="indexs" @click="terrace_level(items)">
								<view class="d-flex j-sb p-3 mx-2">
									<view class="d-flex">
										<u-icon v-if="items.icon_show" name="minus-circle" color="#E7484D" size="40"></u-icon>
										<u-icon v-else  name="plus-circle" color="#E7484D" size="40"></u-icon>
										<view class="ml-1 font-md">{{items.cat_name}}</view>
									</view>
								</view>
								<!-- 三级 -->
								<view class="" v-show="items.icon_show">
									<view class=""  v-if="items.cat_id==threeItem.parent_id" v-for="(threeItem,threeIndex) in threeClazz" :key="threeIndex">
										<view class="px-5 py-2 d-flex j-sb mx-3" >
											<view>{{threeItem.cat_name}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="footer">
			</view>
			<view v-show="tabIndex==0"  class="bg-white py-2 w-100 position-fixed bottom-0 btn">
				<button type="warn" @click="addClazz">添加分类</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				classList:["商品分类","平台分类"],
				scrollHeight:0, // 自适应高度
				
				goodsClazz:[], // 商品分类列表
				oneGoods:[], // 1级商品分类
				twoGoods:[], // 2级商品分类
				threeGoods:[], // 3级商品分类

				
				terraceClazz:[], // 平台分类
				oneClazz:[], // 1级平台分类
				twoClazz:[], // 2级平台分类
				threeClazz:[], // 3级平台分类
				tabIndex:0,  // 标识符tab
				goods_cat_id:"" ,// 二级parent_id
				
				User:"", // 用户信息
				u_loadmore:true, // 加载中
			}
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.footer').boundingClientRect()
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom + 'px';
					})
				}
			})
		},
		onLoad() {
				this.$H.post("admin/user/userinfo").then(res=>{
					this.User=res.data
				})
				// 商品分类 merchant merchant
				this.$H.post("admin/merchant/goods/merchant/category").then(res=>{
					this.u_loadmore=false  
					this.goodsClazz=res.data
					this.goodsClazz.filter((item,index)=>{
							return item.icon_show=false,item.iconshow=false
					})
					this.oneGoods=this.goodsClazz.filter((item,index)=>{
						if(item.parent_id==0){
							this.oneGoods=this.goodsClazz.forEach((v,i)=>{
								if(item.cat_id==v.parent_id){
									return item.iconshow=true
								}
							})
							return item
						}
					})
					console.log(this.oneGoods)
				})
				// 平台分类
				this.$H.post("admin/merchant/goods/category").then(res=>{
					if(res.status.succeed == 1){
						this.u_loadmore=false  
						this.terraceClazz=res.data
						this.terraceClazz.filter((item,index)=>{
								return item.icon_show=false
						})
						
						this.oneClazz=this.terraceClazz.filter((item,index)=>{
							if(item.parent_id==0){
								return item
							}
						})
					}
				})		
		},
		onShow() {
			var globalData = getApp().globalData.closeLists; //获取全局变量
			getApp().globalData.closeLists= ''; //修改全局变量
			// 商品分类
			this.$H.post("admin/merchant/goods/merchant/category").then(res=>{
				this.goodsClazz=res.data
				this.goodsClazz.filter((item,index)=>{
						return item.icon_show=false,item.iconshow=false
				})
				this.oneGoods=this.goodsClazz.filter((item,index)=>{
					if(item.parent_id==0){
						this.oneGoods=this.goodsClazz.forEach((v,i)=>{
							if(item.cat_id==v.parent_id){
								return item.iconshow=true
							}
						})
						return item
					}
				})
				console.log(this.oneGoods)
			})
		},
		methods: {
			// 编辑商品分类页面
			class_detail(item){
				uni.navigateTo({
					url:"/pages/goods-class-edit/goods-class-edit?category_id="+item.cat_id
				})
			},
			// 二级
			two_detail(item){
				uni.navigateTo({
					url:`/pages/goods-class-edit/goods-class-edit?category_id=${item.cat_id}&two=${2}`
				})
			},
			// 三级
			three_detail(item){
				uni.navigateTo({
					url:`/pages/goods-class-edit/goods-class-edit?category_id=${item.cat_id}&two=${3}`
				})
			},
			tab_class(i){
				this.tabIndex=i
				// 商品分类
				if(this.tabIndex==0){
					this.oneGoods=this.goodsClazz.filter((item,index)=>{
						if(item.parent_id==0){
							return item
						}
					})
				}else{
					// 平台分类
					this.oneClazz=this.terraceClazz.filter((item,index)=>{
						if(item.parent_id==0){
							return item
						}
					})
				}
			},
			// 商品展开 收起 一级
			goods_add(items){
				this.twoGoods=this.goodsClazz.filter((item,index)=>{
					if(items.cat_id==item.parent_id){
						return item
					}
				})
				this.twoGoods.filter((item,index)=>{
					this.goodsClazz.filter((v,i)=>{
						if(item.cat_id==v.parent_id){
							return item.iconshow=true
						}
					})
					
				})
				console.log(this.twoGoods)
				items.icon_show=!items.icon_show
			},
			// 商品二级列表
			goods_level(items){
				items.icon_show=!items.icon_show
				this.threeGoods=this.goodsClazz.filter((item,index)=>{
					if(items.cat_id==item.parent_id){
						return item
					}
				})
			},
					
			// 平台展开 收起 一级
			terrace_add(items){
				this.twoClazz=this.terraceClazz.filter((item,index)=>{
					if(items.cat_id==item.parent_id){
						return item
					}
				})
				items.icon_show=!items.icon_show
			},
			// 平台二级列表
			terrace_level(items){
				items.icon_show=!items.icon_show
				this.threeClazz=this.terraceClazz.filter((item,index)=>{
					if(items.cat_id==item.parent_id){
						return item
					}
				})
			},
			
			// 添加分类
			addClazz(){
				uni.navigateTo({
					url:"/pages/goods-class-add/goods-class-add?addClazz="+'添加分类'
				})
				var globalData = getApp().globalData.closeLists; //获取全局变量
				getApp().globalData.closeLists= '顶级分类'; //修改全局变量
			}
		}
	}
</script>

<style>
	.tab_title{
		border: 1px solid #E7484D;
		color: #E7484D;
		border-radius: 40upx;
		overflow: hidden;
	}
	.active_class{
		background-color: #E7484D;
		color: #FFFFFF;
	}
	.btn /deep/ button{
		width: 85%;
		border-radius: 50upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	.footer{
		height: 134upx;
	}
</style>
